<template>
	<view >
		<uni-popup ref="popup"  type="center"  @change="popChange">
			<view class="tip-view">
				<text class="title">请填写姓名</text>
				<!-- 姓 -->
				<input class="input"placeholder="请输入姓" :value="dataSource.nickname"  @input="onXingInput"/>
				<!-- 名 -->
				<input  class="input"placeholder="请输入名" :value="dataSource.nickcname" @input="onMingInput"/>
				<view class="btn-view">
					<text class="btn-left" @click="leftClick">取消</text>
					<text class="btn-right" @click="rightClick">确定</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "change-name-pop",
		props: {
			isShow:false,
			dataSource:Object,
		},
		watch: {
			isShow(val) {
				if(val){
					this.inputXingKey=this.$props.dataSource.nickname
					this.inputMingKey=this.$props.dataSource.nickcname
					this.$refs.popup.open();
				}
			}
		},
		data() {
			return {
				inputXingKey:"",
				inputMingKey:"",
			};
		},
		methods:{
			onXingInput: function(event) {
				this.inputXingKey = event.target.value
			},
			onMingInput: function(event) {
				this.inputMingKey = event.target.value
			},
			popChange(e) {
				if(!e.show){
					var obj = {
						inputXingKey: "",
						inputMingKey:"",
						isclose: false,
						tag:'cancle'
					};
					this.$emit('returnInputDialog', obj);
				}
			},
			leftClick(){
				var obj = {
					inputXingKey: "",
					inputMingKey:"",
					isclose: false,
					tag:'cancle'
				};
				this.$emit('returnInputDialog', obj);
				this.$refs.popup.close();
			},
			rightClick(){
				var obj = {
					inputXingKey: this.inputXingKey,
					inputMingKey:this.inputMingKey,
					isclose: false,
					tag:'sure'
				};
				if(!this.inputXingKey){
					uni.showToast({
						icon:"none",
						title:"请输入姓氏"
					})
					return
				}
				if(this.inputXingKey.length>2){
					uni.showToast({
						icon:"none",
						title:"您填写的姓氏超过了两个字"
					})
					return
				}
				if(!this.inputMingKey){
					uni.showToast({
						icon:"none",
						title:"请输入名字"
					})
					return
				}
				if(this.inputMingKey.length>4){
					uni.showToast({
						icon:"none",
						title:"您填写的名字超过了四个字"
					})
					return
				}
				this.$emit('returnInputDialog', obj);
				this.$refs.popup.close();
			}
		}
	}
</script>

<style>
	@import "change-name-pop.css";
</style>
